var AllCharsView = new KONtx.Class ({
	ClassName: 'AllCharsView',
	
	Extends: KONtx.system.SidebarView,
	
	config: {
		visibleRows : 10
	},
	
	createView: function () {
		
		/* COMPONENTS */
		this.backButton   = new KONtx.control.BackButton({ label: 'Volver al Menu' }).appendTo(this);
        this.dataContainer = new KONtx.control.EmptySpace({
        	styles: {
            	height: this.height - this.backButton.height,
                vOffset: this.backButton.height,
                background: 'black',
        	}
      	}).appendTo(this);
      	
      	this.controls.listChars = new KONtx.control.Grid({
			//rows: 		this.config.visibleRows,
			rows: this.config.visibleRows,
			cellCreator:	this._cellCreator,
			cellUpdater:	this._cellUpdater,
			styles: {
				width: 	this.dataContainer.width,
				height:	400,
				background: 'white'
				
			}
		}).appendTo(this.dataContainer);
	},
	
	_cellCreator : function() {
		var cell = new KONtx.control.GridCell({
			styles: {
				//width: 		this.width,
				//height:		KONtx.utility.scale(25),
				fontSize: '14px',
				width: this.width,
				height: KONtx.utility.scale(100),
				background: '#1f1f1d',
				color: 'white'
			}
		});

		cell.charLevel = new KONtx.element.Text({
      		label: 'charLevel',
			styles: {
				width: 24
      		}
    	}).appendTo(cell);
    	
		cell.charName = new KONtx.element.Text({
      		label: 'charName',
			styles: {
				width: 200,
				hOffset: cell.charLevel.width
      		}
    	}).appendTo(cell);
    	
    	cell.charClass = new KONtx.element.Image({
    		src:"",
			styles: {
				width:20,
				height:20,
				vAlign: "top",
                hAlign: "left",
				hOffset: cell.charLevel.width + cell.charName.width,
				vOffset: 2
      		}
    	}).appendTo(cell);
    	
    	cell.charRace = new KONtx.element.Image({
    		src:"",
			styles: {
				width:20,
				height:20,
				vAlign: "top",
                hAlign: "left",
                vOffset: 2,
				hOffset: cell.charLevel.width + cell.charName.width + cell.charClass.width
      		}
    	}).appendTo(cell);
    	
    	cell.charGuild = new KONtx.element.Text({
      		label: 'charGuild',
			styles: {
				width:170,
				hOffset: 0,
				vOffset:cell.charName.height
      		}
    	}).appendTo(cell);
    	
    	cell.charRealm = new KONtx.element.Text({
      		label: 'charRealm',
			styles: {
				vOffset:cell.charName.height,
				hOffset: cell.charGuild.width
      		}
    	}).appendTo(cell);
    	

    	
    	cell.charFaction = new KONtx.element.Image({
    		src: "",
            styles: {
            	width: 20,
            	height: 20,
            	vAlign: "top",
                hAlign: "left",
               	hOffset: cell.charLevel.width + cell.charName.width + cell.charClass.width +cell.charRace.width,
				vOffset: 2
            }
    	}).appendTo(cell);
    	

    	return cell;
	},
	
	_cellUpdater: function(cell, dataitem) {
		cell.charName.setText(dataitem.charName);
		cell.charLevel.setText(dataitem.charLevel);
		cell.charRealm.setText(dataitem.charRealm);
		cell.charRace.src = "http://zapan.es/files/icons/wow/"+dataitem.charRace+"-"+dataitem.charGender+".png";
		cell.charGuild.setText(dataitem.charGuild);
		cell.charFaction.src = "http://zapan.es/files/icons/wow/icon-"+dataitem.charFaction+".png";
		cell.charClass.src = "http://zapan.es/files/icons/wow/"+dataitem.charClass+".png";
	},
	
	updateView: function() {
		try {
			var charList = [];
			var request = new XMLHttpRequest();
			var myURL = new URL();
			myURL.location = "http://eu.wowarmory.com/search.xml?searchQuery=Elric&searchType=all";
	
			request.autoRedirect = false;
			request.open("GET", myURL.location ,false);
			request.setRequestHeader( "User-Agent", "Mozilla/5.0 Gecko/20070219 Firefox/2.0.0.2" );
			request.send();
		
			if (request.status == 200) {
				var dom = request.responseXML;
				var element = dom.evaluate( "page/armorySearch/searchResults/characters/character");
				
				for ( var i = 0; i < element.length; i++ ) {
					charList.push({
						charName: 		element.item(i).getAttribute("name"),
						charLevel: 		element.item(i).getAttribute("level"),
						charRealm: 		element.item(i).getAttribute("realm"),
						charRace: 		element.item(i).getAttribute("raceId"),
						charGender:		element.item(i).getAttribute("genderId"),
						charGuild: 		element.item(i).getAttribute("guild"),
						charFaction: 	element.item(i).getAttribute("factionId"),
						charClass: 		element.item(i).getAttribute("classId")
									
					});
				}
				this.controls.listChars.changeDataset(charList);
				return charList.length;
			}
			
		} 
		catch (e) {
			print(e);
			return 0;
		}
		return 0;
    }
	
});

